
<!doctype html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
      .border{
          border-radius: 8px;
          background-color: #ffffff;
      }
      *{
          margin:0px;
          padding:0px;
      }
        body {
    font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
      }
    </style>
</head>
<body>
<div class="container" style="background-color: #f3f3f4;">
    <div class="row a">
        <div class="col-md-2" style="background-color: #ffffff;height: 700px;padding:0px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    
                   <div style="display: inline-block;">组织机构</div>
                   <div  style="display: inline-block;padding-left: 30px;">
                    <span class="glyphicon glyphicon-edit"></span>
                    <span class="glyphicon glyphicon-menu-down"></span>
                    <span class="glyphicon glyphicon-refresh"></span>
                    </div>
                </div>
                <div class="panel-body">
                 树
                </div>
                
              </div>
        </div>
        <div class="col-md-10" style="padding:0px;height:678px;">
                <div class="row border" style="margin:10px 10px;padding:10px 0px;">
                    <div class="col-md-12">
                        <form class="form-inline">
                            <div class="form-group">
                              <label for="exampleInputName2">登录名：</label>
                              <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                            </div>
                            <div class="form-group">
                              <label for="exampleInputEmail2">手机号</label>
                              <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                            </div>
                            <div class="form-group">
                                <label for="exampleInputEmail2">状态</label>
                                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                              </div>
                              <div class="form-group">
                                <label for="exampleInputEmail2">创建时间</label>
                                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                              </div>
                              <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-search"></span>搜索</button>
                                <button type="reset" class="btn btn-warning"><span class="glyphicon glyphicon-refresh"></span>重置</button>
                          </form>
                    </div>
                </div>
                <div class="row border"  style="margin:10px 10px;padding:10px 0px;">
                    <div class="col-md-12" >
                        <table id="table"></table>
                    </div>
                </div>
        </div>
    
    </div>
    <div class="row">
        <div id="toolbar">
            <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-sm">（成功）Success</button>

<button type="button" class="btn btn-info btn-sm">（一般信息）Info</button>

<button type="button" class="btn btn-warning btn-sm">（警告）Warning</button>

<button type="button" class="btn btn-danger btn-sm">（危险）Danger</button>

        </div>
        <div class="col-md-12 navbar navbar-default navbar-fixed-bottom" style="text-align: right;background-color: #ffffff;min-height: 40px;line-height: 40px;">© 2022 RuoYi Copyright</div>
    </div>

</div>

</body>
<style>
  .header{
    background-color: gray;
  }
</style>
<script>

$('#table').bootstrapTable({
    height:400,
    theadClasses:'header',
    rowStyle:function(row,index){
      var classes = [
      'bg-blue',
      'bg-green',
      'bg-orange',
      'bg-yellow',
      'bg-red'
    ]

    if (index % 2 === 0 && index / 2 < classes.length) {
      return {
        classes: classes[index / 2]
      }
    }
    return {
      css: {
        color: 'blue'
      }
    }
    },
    undefinedText:'sdsd11',
    sortName:'id1',
    showColumns:true,
    showToggle:true,
    showRefresh:true,
    pagination:true,
    toolbar:'#toolbar',
  columns: [{
    field: 'id',
    title: 'ID'
  }, {
    field: 'userName',
    title: '用户名'
  }, {
    field: 'pwd',
    title: '密码'
  }],
  url:'user'
})

</script>
</html>
